<template>
	<view class="content">
		<view class="list-box">
			<view class="item-box">
				<view class="item">
					<view class="colmun" v-for="(item, index) in list" :key="index">
						<view class="" @click="goInfo(item.address)">
							<text>{{ item.address }}</text>
							<text class="phone">{{ item.landarea }}亩</text>
						</view>
						<view class="item-btn" @click="formSubmit(index,item.landarea,item.address)">承包</view>
					</view>
				</view>
				<view class="changeRadio" v-if="list.length>0">
					<label class="radio" style="transform:scale(0.6)">
						<radio color="#3FC377" value="" :checked="show" @click="checkbox()" />
					</label>
						<view style="margin-left: -10rpx;" @click="goOut()">《默认合同》</view>
				</view>
			</view>
			<view v-if="popupdata" class="popup1"></view>
			<view v-if="popupdata" class="popup">
				<view v-if="outdata" class="setpop">确认承包该土地？</view>
				<view v-if="!outdata" class="setpop">
					<view class="order">
						<!-- <view class="name">订单详情</view> -->
						<view class="money">
							<view class="left">订单金额</view>
							<view class="right">￥{{landarea*landprice}}元</view>
						</view>
						<view class="pay">
							<view class="wx" @tap="wxPay">
								<image class="icon" src="../../../static/wxpay.png" mode=""></image>
								<text>微信支付</text>
								<image v-if="!is_wx" src="../../../static/s0.png" mode=""></image>
								<image v-else src="../../../static/s1.png" mode=""></image>
							</view>
							<view class="wx" @tap="walletPay">
								<image class="icon" src="../../../static/pay2.png" mode=""></image>
								<text>钱包支付</text>
								<image v-if="!is_wallet" src="../../../static/s0.png" mode=""></image>
								<image v-else src="../../../static/s1.png" mode=""></image>
							</view>
						</view>
						<view class="item-btn">
							<view class="submit" style="margin-top: 50rpx;" @click="submitPay">
								提交支付
							</view>
							<view class="submit" style="margin-top: 50rpx;" @click="qxPay()">
								取消支付
							</view>
						</view>
						
					</view>
				</view>
				<view class="setpopch" v-if="outdata">
					<view :class="{ quding: quxiao }" @click="closes2">取消</view>
					<view :class="{ quding: queding }" @click="closes">确定</view>
				</view>
				<!-- <view class="bottoms" v-if="!outdata" @click="goods">好的</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: '',
			popupdata: false,
			outdata: false,
			page: 1,
			show: false,
			is_wx: true,//是否选择微信支付
			is_wallet: false,//是否选择钱包支付
			money:0,
			token:'',
			landprice:'',
			landarea:'',
			address:''
		};
	},
	onLoad() {
		this.token=uni.getStorageSync('token')
		this.getinfo();
		// #ifdef MP-WEIXIN
		this.getWxcode();
		// #endif
		this.getprice()
	},
	onReachBottom() {
		// if(this.last_page - this.page >= 0){
		this.page++;
		this.getinfo();
		// }
	},
	methods: {
		//取消支付
		qxPay(){
			this.popupdata=false
		},
		getprice(){
			this.$http.post('/api/Index/get_landprice',{token:this.token}).then(res=>{
				this.landprice=res.data.data.landprice
			})
		},
		getWxcode(){
			let that = this;
			uni.login({
			  provider: 'weixin',
			  success: function (loginRes) {
			    console.log(loginRes.code);
				that.wx_code = loginRes.code
			  }
			});
		},
		//选择微信支付
		wxPay(){
			//关闭钱包支付，选择微信支付
			this.is_wallet = false;
			this.is_wx = !this.is_wx;
		},
		//选择钱包支付
		walletPay(){
			this.is_wx = false;
			this.is_wallet = !this.is_wallet;
		},
		//提交支付
		submitPay(){
			if(this.is_wx){
				//微信支付
				this.pay('1');
				return
			}
			//钱包支付
			this.pay('2')
		},
		pay(pay){
			let that = this;
			var type = pay;
			// #ifdef APP-PLUS
			type = 'app'
			// #endif
			// #ifdef MP-WEIXIN
			type= 'miniapp'
			// #endif
			//let number=this.landarea*this.landprice
			//console.log(number)
			this.$http.post('/api/order/add',{
				token:this.token,
				pay_method: pay,
				cate_ids: -1,
				cate_id: -1,
				number: this.landarea,
				code: this.wx_code,
				type: type,
				address:this.address
			}).then(res => {
				if(this.is_wx){
					// #ifdef MP-WEIXIN
					let result2 = typeof res.data.data.params == 'string' ? JSON.parse(res.data.data.params) : res.data.data.params
					this.pay1(result2)
					// #endif
					// #ifdef APP-PLUS
					let result2 = typeof res.data.data.params == 'string' ? JSON.parse(res.data.data.params) : res.data.data.params
					this.appPay(result2)
					// #endif
				}else{
					this.$u.toast('余额支付成功');
					this.popupdata=false
					 that.getinfo()
					
				}
			})
		},
		//微信支付
		pay1(result2){
			let that = this;
			uni.requestPayment({
			    provider: 'wxpay',
			    timeStamp: result2.timeStamp,
			    nonceStr: result2.nonceStr,
			    package: result2.package,
			    signType: result2.signType,
			    paySign: result2.paySign,
			    success: function (res) {
			      that.$u.toast('微信支付成功');
			      that.popupdata=false
				   that.getinfo()
			    },
			    fail: function (err) {
			        console.log('fail:' + JSON.stringify(err));
					that.$u.toast('微信支付失败')
					 that.getinfo()
			    }
			});
		},
		//APP支付
		appPay(result2){
			console.log(result2)
			let that = this;
			uni.requestPayment({
				provider: 'wxpay',
				orderInfo:result2,
				success: res => {
					that.$u.toast('微信支付成功');
					that.popupdata=false
					 that.getinfo()
				},
				fail: res => {
					that.$u.toast('微信支付失败')
					 that.getinfo()
				},
				complete: (res) => {
					console.log(res)
				}
			});
		},
		payEnd(){
			this.popupdata = false;
			uni.switchTab({
				url:'/pages/index/index'
			})
		},
		goOut() {
			uni.navigateTo({
				url: '/pages/me/outearth/out_xieyi'
			});
		},
		checkbox() {
			this.show = !this.show;
		},
		//获取村列表
		getinfo() {
			let token = uni.getStorageSync('token');
			this.$http
				.post('/api/Index/get_village_list', {
					token: token,
					limit: '15',
					page: this.page
				})
				.then(res => {
					this.list = res.data.data.data;
				});
		},
		goInfo(address) {
			uni.navigateTo({
				url: '/pages/me/inearth/inearth?address=' + address
			});
		},
		formSubmit(data,landarea,address) {
			if (this.show == false) {
				this.$u.toast('请勾选默认合同');
			} else {
				this.landarea=landarea
				this.address=address
				this.id = data;
				this.popupdata = true;
				this.outdata = true;
			}
		},
		closes2() {
			(this.quxiao = true), (this.queding = false);
			this.outdata = false;
			this.popupdata = false;
		},
		async closes() {
			(this.quxiao = true), (this.queding = false);
			this.outdata = true;
			this.popupdata = true;
			// let res = await this.$http.post('/api/index/set_rent', { id: this.id, status: '1' });
			
			// this.loadData();
			this.outdata = false;
		},
		goods() {
			this.popupdata = false;
		}
	}
};
</script>

<style lang="scss">
.content {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 20rpx 30rpx 80rpx;
	box-sizing: border-box;
}
.item {
	padding: 0 30rpx;
	box-sizing: border-box;
	width: 690rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 20px;
	margin-bottom: 30rpx;
}
.colmun {
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	&:last-child {
		border: none;
	}
	text {
		font-size: 17px;
		font-family: PingFang SC;
		//font-weight:500;
		color: rgba(51, 51, 51, 1);
	}
	.phone {
		font-size: 17px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		flex: 1;
		margin: 0 30rpx;
	}
	image {
		width: 12rpx;
		height: 23rpx;
	}
	.item-btn {
		width: 50px;
		margin-left: 30rpx;
		text-align: center;
		color: #ffffff;
		border-radius: 10rpx;
		background-color: #3fc377;
	}
}
.changeRadio{
	width: 250rpx;
	height: 40rpx;
	margin: 30rpx auto;
	display: flex;
	align-items: center;
	.radio{
		
	}
}
.popup1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.7;
	filter: alpha(opacity=50);
	z-index: 100;
}

.popup {
	position: fixed;
	top: 200px;
	left: 50%;
	transform: translateX(-50%);
	width: 291px;
	/* height:564upx; */
	background: #fff;
	margin-left: 12upx;
	border-radius: 10upx;
	font-weight: 600;
	z-index: 102;
}

.order{
	width:500rpx;
	background:rgba(255,255,255,1);
	border-radius:20px;
	padding: 30rpx ;
	margin-top:-70rpx;
	// margin-top: 30rpx;
	.name{
		font-size:13px;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
	
	}
	.money{
		border-bottom: 1px solid #F8F8F8;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 0 40rpx;
		padding-bottom: 25rpx;
		box-sizing: border-box;
		.left{
			font-size:16px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
		.right{
			font-size:16px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(63,195,119,1);
		}
	}
	.pay{
		.wx{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 40rpx;
			&:last-child{
				margin-top: 40rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.icon{
				width:67rpx;
				height:67rpx;
			}
			text{
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				flex: 1;
				margin: 0 40rpx;
			}
		}
	}
	.item-btn{
		width: 480rpx;
		display: flex;
		justify-content: space-around;
		.submit{
			width: 200rpx;
			height: 50rpx;
			border-radius: 20rpx;
			color: #FFFFFF;
			font-weight: normal;
			background-color: #18B566;
		}
	}
}
.setpop {
	text-align: center;
	margin-top: 39.5px;
	margin-bottom: 46px;
	font-size: 18px;
}

.setpopch {
	display: flex;
	justify-content: space-between;
	padding: 0 12px 13.5px;
	.quding {
		color: #ffffff;
		background-color: #19be6b;
	}
}

.setpopch view {
	width: 125px;
	line-height: 44px;
	text-align: center;
	border-radius: 5px;
}

.setpopch :first-child {
	background-color: #e5e5e5;
	color: #a8a8a8;
}

.setpopch :last-child {
	background-color: #3fc377;
	color: white;
}
.bottoms {
	width: 250px;
	line-height: 44px;
	text-align: center;
	border-radius: 5px;
	background-color: #3fc377;
	color: white;
	margin: 0 auto 13.5px;
}
</style>
